<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jquery.masklayer.js-demo</title>
		<link href="jquery.masklayer.css" rel="stylesheet">
		<script src="jquery.min.js" type="text/javascript" ></script>
		<script src="jquery.masklayer.js" type="text/javascript" ></script>
		<style type="text/css">
			.part_div {
				width:500px;
				height:420px;
				margin:0 auto;
				border-style: dashed;
				border-width: 1px;
				border-color: red;
			}
			.part_divs {
				width:246px;
				height:127.15px;
				float: left;
				margin-top: 10px;
				border-style: solid;
				border-width: 1px;
				border-color: black;
			}
			.m_l {
				margin-left: 4px;
			}
			.container {
				height: 1000px;
			}
			.welcome {
				text-align:center
			}
			.span_self,.div_self {
				width:80px;
				cursor: pointer;
				border-style: dashed;
				border-width: 1px;
				border-color: blue;
				margin: 0 auto;
			}
			.span_self {
				float: left;
				margin-left: 51%;
				margin-top: 20px;
			}
			.div_self {
				float: right;
				margin-right: 51%;
				margin-top: -20px;
			}
			.span_self:hover,.div_self:hover {
				text-decoration: underline;				
			}
		</style>
		<script type="text/javascript">
		$(function() {
			// full screen shade
			$(document).on("click",".full",function() {
				$.masklayer.init({
			    	msg : 'loading...',
			    	sec2hide : 2
		  		});
			});
			
			// simple part div shade
			$(document).on("click",".part",function() {
				$.masklayer.init({
			    	msg : '处理中',
			    	box:".part_div",
			    	sec2hide : 2
		  		});
			});
			// multiple parts div shade
			$(document).on("click",".parts",function() {
		  		$.masklayer.init({
			    	msg : '加载中',
			    	box:".part_divs"
		  		});
		  		runTread(function() {
		  			$.masklayer.remove()
		  		});

			});

			// resize the shaded div
			$(document).on("click",".resize",function() {
				$.masklayer.init({
			    	msg : 'loading...',
			    	box:".part_divs",
			    	size : {
						height : "110px"
			    	},
	    		 	sec2hide: 2
		  		});
			});

			$(document).on("click",".span_self",function() {
				masklayer_self($(this));
			});
			$(document).on("click",".div_self",function() {
				masklayer_self($(this));
			});
			$(document).on("click",".btn_self",function() {
				masklayer_self($(this));
			});
			$(document).on("click",".link_self",function() {
				masklayer_self($(this));
			});

		});

		// masklayer common call function
		function masklayer_self($this) {
			$this.masklayer({sec2hide:2});
		}

		// function imitate thread
		function runTread(callback){
		  return setTimeout(function(){
		    callback();
		  },1500);
		}
		</script>
	</head>	
	<body>
		<div class="container">
			<h2 class="welcome" color="red">Welcome to jquery.masklayer.js demo!</h2>
			<div style="text-align:center;">
				<div class="part_div" >
					<div class="part_divs"></div>
					<div class="part_divs m_l"></div>
					<div class="part_divs"></div>
					<div class="part_divs m_l"></div>
					<div class="part_divs"></div>
					<div class="part_divs m_l"></div>
				</div>
				<br>
				<div>
					<input type="button" class="full" value="全屏遮罩">
					<input type="button" class="part" value="局部遮罩">
					<input type="button" class="parts" value="多局部遮罩">
					<input type="button" class="resize" value="改变尺寸">
					<input type="button" class="btn_self" value="按钮遮罩">
					<a class="link_self" href="javascript:;" >链接遮罩</a>
				</div>
				<span class="span_self" >span遮罩</span>
				<div class="div_self" >div遮罩</div>
			</div>		
		</div>
	</body>
</html>